<template>
    <a-card :bordered="false">
      <div>
        <!--<a-row>
          <a-col :xl="6" :lg="1" :md="8" :sm="24">
            <p>报损报溢查询</p>
          </a-col>
        </a-row>-->
        <a-row>
          <a-col :xl="6" :lg="1" :md="8" :sm="24">
            <p>查询设置</p>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :xl="12" :lg="7" :md="8" :sm="24">
            <span>日期：</span>
            <a-date-picker
              v-model="queryParam.sTime"
              :disabled-date="disabledStartDate"
              show-time
              format="YYYY-MM-DD"
              placeholder="开始时间"
              @openChange="handleStartOpenChange"
              @change="onChangeS"
            />
            <!--:open="startOpen"-->

            <!--:showToday="false"-->
            <span class="query-group-split-cust"></span>
            <a-date-picker
              v-model="queryParam.eTime"
              :disabled-date="disabledEndDate"
              show-time
              format="YYYY-MM-DD"
              placeholder="结束时间"
              @openChange="handleEndOpenChange"
              :open="endOpen"
              @blur="endBlur"
              @focus="endFour"
              @change="onChangeE"
            />
            <!--:valueFormat="YYYY-MM-DD"-->

          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span>单据类型：</span>
            <a-select default-value="0" style="width: 120px" label="日期" allowClear v-model="queryParam.type">
              <a-select-option value="0">
                报损单
              </a-select-option>
              <a-select-option value="1">
                报溢单
              </a-select-option>
            </a-select>
          </a-col>
          <a-col :xl="2" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="loadDocumentata" icon="search">查询</a-button>
            </span>
          </a-col>
        </a-row>
      </div>
      <br/>
      <div>
        <a-table :columns="columns" :data-source="data2" :customRow="Rowclick" :pagination="false">
          <!--<template slot="htmlSlot" slot-scope="text,rows">
            <div v-html="text"></div>
          </template>-->
        </a-table>

      </div>
      <br/>
      <br/>
      <br/>

      <div>
        <a-table v-if="tableDisply" :columns="columnsList" :data-source="dataList" :pagination="false">
          <!--:table-layout="fixed"-->
        </a-table>
      </div>
    </a-card>
</template>

<script>


  //定义引入的js插件
  import '@/assets/less/TableExpand.less'
  import { filterObj } from '@/utils/util';
  import { postAction, getAction } from '@/api/manage'
  import { ACCESS_TOKEN } from "@/store/mutation-types"

  export default {
        data() {
            return {
              columns : [
                {
                  title: '',
                  dataIndex: 'id',
                  key:'rowIndex',
                  width:60,
                  align:"center",
                  customRender:function (t,r,index) {
                    return parseInt(index)+1;
                  }
                },
                {
                  title:'单号',
                  align:"center",
                  dataIndex: 'number'
                },
                {
                  title:'日期',
                  align:"center",
                  dataIndex: 'date'
                },
                {
                  title:'类型',
                  align:"center",
                  dataIndex: 'type'
                },
                {
                  title:'操作员',
                  align:"center",
                  dataIndex: 'user_name'
                },
                {
                  title:'备注',
                  align:"center",
                  dataIndex: 'remarks',
                  width:400,
                },

              ],
              //详细数据表格
              columnsList : [
                {
                  title: '',
                  dataIndex: '',
                  key:'rowIndex',
                  width:60,
                  align:"center",
                  customRender:function (t,r,index) {
                    return parseInt(index)+1;
                  }
                },
                {
                  title:'编号',
                  align:"center",
                  dataIndex: 'goods_code'
                },
                {
                  title:'商品名称',
                  align:"center",
                  dataIndex: 'goods_name'
                },
                {
                  title:'商品型号',
                  align:"center",
                  dataIndex: 'goods_model'
                },
                {
                  title:'单价',
                  align:"center",
                  dataIndex: 'price'
                },{
                  title:'数量',
                  align:"center",
                  dataIndex: 'goods_num'
                },
                {
                  title:'单位',
                  align:"center",
                  dataIndex: 'goods_unit',
                },
                {
                  title:'总金额',
                  align:"center",
                  dataIndex: 'total',
                },

              ],
                //定义组件中关联属性
              startOpen: false,
              endOpen: false,
              queryParam: {
                sTime:'',
                eTime:'',
                type: '0',
              },
              sTime:'',
              eTime:'',
              /*queryParam2: {
                id:'',
                type: '0',
              },*/
              url: {
                list: "/damageOrOverflowGoods/list/",
                documentList: "/damageOrOverflowGoods/goodsList/"
              },
              data2:undefined,
              dataList:undefined,//详细数据
              tableDisply: false,//控制表格展示
            };
        },
      watch: {
       /* startValue(val) {
          this.queryParam.sTime = val;

        },
        endValue(val) {
          this.queryParam.eTime = val;
        },*/
       },
        methods: {
          //行绑定事件
          Rowclick(record, index) {

            return {
              on: {
                click: () => {
                  //打开表格
                  console.log(record)
                  console.log(index)
                  /*this.queryParam2.id = record.id;
                  this.queryParam2.type = this.queryParam.type;*/
                  this.tableDisply = true;
                  //发请求
                    this.loading = true;
                    postAction(this.url.documentList+record.id+"/"+this.queryParam.type).then((res) => {
                      if (res.success) {
                        console.log(res);
                        this.dataList = res.rows;
                      }
                      if (res.code === 510) {
                        this.$message.warning(res.message)
                      }
                      this.loading = false;
                    })
                },
                /*dblclick: () => {
                  console.log(record, index, 2222);
                  this.showPdf = true;
                  let url = "demo.pdf";
                  this.pSrc = "/static/pdf/web/viewer.html?file=" + url;
                  // window.open("/static/pdf/web/viewer.html?file=" + url);
                }*/
              }
            };
          },
          onChangeS(date, dateString) {
            // console.log(date, dateString);
            this.sTime=dateString;
          },
          onChangeE(date, dateString) {
            // console.log(date, dateString);
            this.eTime=dateString;
          },
            //定义组件事件关联方法
          endBlur(){
            this.endOpen = false;
          },
          endFour(){
            this.endOpen = true;
          },
          disabledStartDate(startValue) {
            const endValue = this.queryParam.eTime;
            if (!startValue || !endValue) {
              return false;
            }
            return startValue.valueOf() > endValue.valueOf();
          },
          disabledEndDate(endValue) {
            const startValue = this.queryParam.sTime;
            if (!endValue || !startValue) {
              return false;
            }
            return startValue.valueOf() >= endValue.valueOf();
          },
          handleStartOpenChange(open) {
            if (!open) {
              this.endOpen = true;
            }
          },
          handleEndOpenChange(open) {
            this.endOpen = open;
          },

          loadDocumentata(){
            this.loading = true;
            postAction(this.url.list+this.sTime+"/"+this.eTime+"/"+this.queryParam.type).then((res) => {
              if (res.success) {
                console.log(res);
                this.data2 = res.rows;
                // this.ipagination.total = res.result.total;
              }
              if (res.code === 510) {
                this.$message.warning(res.message)
              }
              this.loading = false;
            })
          }
        },
        created() {//页面加载前执行的操作
          // this.loadDocumentata();
        },
        mounted() {//页面加载后执行的操作

        }
    }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>